<html lang="zh-CN">
<head>
	<title>{$name}</title>
	<meta charset="UTF-8">
	<meta name="viewport" content=" initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="format-detection" content="telephone=no">
	<link href="{$Think.config.RESOURCEURL}wx_assets/css/common.css{$Think.config.RESOURCE_VER}" rel="stylesheet">
	<!-- <script src="http://sdk.talkingdata.com/app/h5/v1?appid=DE13C350F41F5DE78FEC51DB5DE730D1&vn=v2&vc=v2"></script> -->
	<script type="text/javascript" src="{$Think.config.RESOURCEURL}wx_assets/js/zepto.1.1.3.min.js{$Think.config.RESOURCE_VER}"></script>
	<script type="text/javascript" src="{$Think.config.RESOURCEURL}wx_assets/js/zepto.alert.js{$Think.config.RESOURCE_VER}"></script>
	<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
	<script type="text/javascript" src="{$Think.config.RESOURCEURL}wx_assets/js/wx_share.js{$Think.config.RESOURCE_VER}"></script>
	<script src="{$Think.config.RESOURCEURL}wx_assets/js/util.js{$Think.config.RESOURCE_VER}" type="text/javascript"></script>
	<script src="{$Think.config.RESOURCEURL}wx_assets/js/product/timer.js{$Think.config.RESOURCE_VER}" type="text/javascript"></script>
</head>
<style>
	body{background-color:#F0EFED;}
	.coupon{background-color:white;border-radius:15px;margin:10px}
	.coupon_top{
		height:115px;
		border-bottom:dotted 1px #F0EFED;
	}
	.coupon_top>.proImg{
		padding: 20px 10px;
		text-align: center;
		font-size: 0;
		height: 100%;
		box-sizing: border-box;
		width: 93px;
		vertical-align: top;
		float: left;
		display: -webkit-box;
		-webkit-box-align: center;
	}
	.coupon_top>.proImg>img{
		max-width:100%;
		max-height:100%;
	}
	.coupon_top>.proInfo{
		height: 100%;
		padding: 32px 0;
		box-sizing: border-box;
		overflow: hidden;
	}
	.coupon_top>.proInfo>.name{
		font-size: 16px;
		color: #4a4a4a;
		line-height: 21px;
		height: 41px;
		color:#333333;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
	.coupon_top>.proInfo>.price{
		color:#FFAA2B;
		font-size: 16px;
		line-height: 21px;
	}
	.coupon_middle{
		padding: 18px 0 18px 15px;
		position:relative;
		border-bottom:solid 1px #F0EFED;
		color:#9D9D9D;
		font-size:14px;
	}
	.coupon_middle>span{
		display:block;
		line-height: 18px;
	}
	.coupon_middle:before{
		content: "";
		height: 15px;
		width: 15px;
		display: block;
		background-color: #F0EFED;
		border-radius: 50%;
		position: absolute;
		top: 0;
		left:0;
		transform: translate(-50%,-50%);
		-webkit-transform: translate(-50%,-50%);
	}
	.coupon_middle:after{
		content: "";
		height: 15px;
		width: 15px;
		display: block;
		background-color: #F0EFED;
		border-radius: 50%;
		position: absolute;
		top: 0;
		right:0;
		transform: translate(50%,-50%);
		-webkit-transform: translate(50%,-50%);
	}
	.coupon_bottom{
		padding:18px 15px;
		color:#9D9D9D;
		font-size:14px;
		line-height:33px;
	}
	.coupon_bottom dt{
		float:left;
		padding-right: 10px;
		vertical-align: top;
		top: 2px;
		position: relative;
	}
	.coupon_bottom dd{
		position:relative;
		overflow:hidden;
	}
	.coupon_bottom dd span{
		display: inline-block;
		vertical-align: top;
		font-size: 22px;
	}
	.coupon_bottom dd span.notClaim{
		color:#333333;
	}
	.coupon_bottom dd img{
		width:30px;
		height:28px;
		position:absolute;
		right:10px;
		top: 50%;
		transform: translate(0,-50%);
		-webkit-transform: translate(0,-50%);
	}
	.virtualInfo{
		background-color:white;
		padding:10px;
		font-size:16px;
		margin:10px 0;
		line-height:26px;
	}
	.virtualInfo dt{
		color:#F27407;
	}
	.virtualInfo dd{
		color:#7C7B7B;
	}
</style>
<body>
<div class="coupon">
	<div class="coupon_top">
		<div class="proImg" onclick="onDetail('{$id}')">
			<img src="{$picUrl}">
		</div>
		<div class="proInfo" onclick="onDetail('{$id}')">
			<div class="name">{$name}</div>
			<if condition="$discountedPrice neq ''">
				<div class="price">￥{$discountedPrice}</div>
				<else/>
				<div class="price">￥{$fixedPrice}</div>
			</if>

		</div>
	</div>
	<div class="coupon_middle">
		<span>优惠券</span>
		<if condition="$virtualTime eq '1'">
			<span>有效期：永久有效</span>
			<else/>
			<span>有效期：{$virtualStartTime}-{$virtualEndTime}</span>
		</if>

	</div>
	<div class="coupon_bottom">
		<dl>
			<dt>验证码:</dt>
			<dd>
				<volist name="code" id="codes">
					<div style="position: relative;">
						<if condition="$isClaim[$key] eq '1'">
							<span>{$codes}</span>
							<img src="{$Think.config.RESOURCEURL}wx_assets/images/product/isClaim.gif{$Think.config.RESOURCE_VER}">
							<else/>
							<span class="notClaim">{$codes}</span>
						</if>
					</div>
				</volist>
			</dd>
		</dl>
	</div>
</div>
<div class="virtualInfo">
	<dl>
		<dt>使用规则：</dt>
		<dd>
			{$virtualInfo}
		</dd>
	</dl>
</div>

<script>
	function onDetail(id) {
		var basePath = 'call.html?customerId={$customerId}';
		location.href = basePath + '&module=product&method=getProduct&params={"id":' + id + '}';
	}
</script>
</body>
</html>